import { Form, Input, Button } from 'antd';
import { css } from '@emotion/css';
import { useDispatch, useSelector } from 'umi';
import vio from '@/assets/video/bg.mp4';
import { IState } from './model';
import './index.less';
const Login = () => {
  const dispatch = useDispatch();
  const { token } = useSelector<{ login: IState }, { token: string }>(
    (state) => {
      console.log('login state', state);
      return { token: state.login.token };
    },
  );
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    // console.log('Success:', values, token);
    dispatch({ type: 'login/login', payload: { ...values } });
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  const onReset = () => {
    form.resetFields();
  };
  return (
    <div
      className={css`
        position: relative;
        background-color: #1a5c91;
        height: 100vh;
        .bg {
          position: absolute;
          z-index: 1;
          width: 100vw;
          height: 100vh;
          overflow: hidden;
          video {
            width: 100%;
            height: 100%;
          }
        }
        .form-box {
          position: relative;
          z-index: 9;
          transform: translateY(-50%);
          top: 40vh;
          width: 400px;
          margin: auto;
        }
        .form-box-bg {
          position: absolute;
          filter: blur(2px);
          opacity: 0.2;
          background-color: rgb(26 92 145);
          width: 440px;
          height: 254px;
          margin-top: -60px;
          margin-left: -20px;
        }
        .login-form {
        }
        .ant-form-item-explain-error {
          color: #1a5c91;
        }
        .ant-input-affix-wrapper-status-error:not(
            .ant-input-affix-wrapper-disabled
          ):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper {
          border-color: #1a5c91;
        }
        .ant-input-status-error:not(.ant-input-disabled):not(
            .ant-input-borderless
          ).ant-input {
          border-color: #1a5c91;
        }
        .ant-form-item-label
          > label.ant-form-item-required:not(
            .ant-form-item-required-mark-optional
          )::before {
          color: #1a5c91;
        }
      `}
    >
      <div className="bg">
        <video loop muted autoPlay>
          {/* 没静音就不能自动播放 muted属性*/}
          <source src={vio} type="video/mp4" />
        </video>
      </div>
      <div className="form-box">
        <div className="form-box-bg"></div>
        <Form
          className="login-form"
          form={form}
          name="basic"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="账号"
            name="account"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input></Input>
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input.Password></Input.Password>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 14 }}>
            <Button
              style={{ marginTop: '16px', backgroundColor: 'rgb(76 112 156)' }}
              type="primary"
              htmlType="submit"
            >
              Submit
            </Button>
            <Button
              style={{ marginTop: '16px', backgroundColor: 'rgb(76 112 156)' }}
              type="primary"
              htmlType="submit"
              onClick={onReset}
            >
              Reset
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default Login;
